import React from 'react';
import { NavLink } from 'react-router-dom';
import './index.less';
import http from 'libs/http'
import { Menu, Dropdown, Icon } from 'antd';
import UserSvg from '../../../../assets/gerenxinxi.svg'
import TestSvg from 'assets/test.svg'
import defaultHeadImg from 'images/student/head.png';

class StudentHeader extends React.Component {
  constructor(props) {
    super(props)
    const defaultNavList = [
      { name: '学员首页', path: '/student_center/home' },
      { name: '所有课程', path: '/student_center/free_classes' },
      { name: '我的课程', path: '/student_center/my_courses' },
      { name: '原声绘本', path: '/student_center/original_sound' },
      { name: '教师评语', path: '/student_center/teacher_comments' },
      { name: '我的成就', path: '/student_center/my_achievements' },
      { name: '我的订单', path: '/student_center/my_order' },
      // { name: '公开课', path: '/student_center/public_class' },
    ]
    const { navList } = props
    this.state = {
      isPad: false,
      navList: navList || defaultNavList,
      headImg: '',
      realName: '',
    }
  }

  componentDidMount() {
    this.getStudentHeadImg()
    this.getInfo()
    this.checkRoleType()
    const userAgent = navigator.userAgent
    const isPad = /pad/i.test(userAgent)
    this.setState({ 
      isPad,
    })
  }

  checkRoleType = () => {
    http.get('/role/getRole').then(res => {
      res.data && this.setState({
        authority: res.data
      })
    })
  }

  getStudentHeadImg = () => {
    http.get('/student/info/getHeadImageUrl').then(res => {
      const headImg = res.data
      headImg && this.setState({ headImg })
    })
  }

  getInfo = () => {
    http.get('/student/info/getInfo').then(res => {
      const { realName } = res.data;
      this.setState({ realName })
    })
  }

  avoidTheLogin = (role, path) => () => {
    const { history } = this.props
    const { authority } = this.state
    const url = authority === role ? `/${role}` : path
    history.push(url)
  }

  handleLogout = () => {
    http.post('/student/logOut').then(res => {
      this.props.history.push('/home')
    })
  }

  renderMenu = () => (
    <Menu style={{ width: 105 }}>
      <Menu.Item>
        {/* <Icon component={TestSvg}/> */}
        {/* <TestSvg /> */}
        <Icon type="user"/>
        <a rel="noopener noreferrer" href="/#/student_center/personal_center/layout/personal_information" style={{float: 'right'}}>个人资料</a>
      </Menu.Item>
      <Menu.Item>
        <Icon type="lock"/><a rel="noopener noreferrer" href="/#/student_center/personal_center/layout/edit_password" style={{float: 'right'}}>修改密码</a>
      </Menu.Item>
      <Menu.Item onClick={this.handleLogout}>
        <Icon type="rollback"/><a rel="noopener noreferrer" href="javascript:;" style={{float: 'right'}}>退出系统</a>
      </Menu.Item>
    </Menu>
  )

  render() {
    const { isPad, authority, navList, headImg, realName } = this.state
    const _headImg = headImg || defaultHeadImg
    return (
      <div className="header-container">
        <div className="header" style={{ width: `${isPad ? '1000px' : '1200px'}`}}>
          <a className="logo" href="/#"></a>
          <ul className="nav-list">
            {
              navList.map(nav => (
                <li key={nav.path}><NavLink to={ (isPad && nav.padPath) ? nav.padPath : nav.path }><i className="triangle"></i>{nav.name}</NavLink></li>
              ))
            }
          </ul>
          <div className="header-right">
            <img src={_headImg} />
            <div>
              {/* <span>Mike</span>
              <ul>
                <li><a>个人资料</a></li>
                <li><a>密码设置</a></li>
                <li><a>退出系统</a></li>
              </ul> */}
              <Dropdown overlay={this.renderMenu} overlayStyle={{ zIndex: 99999999, top: 80 }}>
              <a className="ant-dropdown-link" href="javascript:;">
                {realName}<Icon type="down" />
              </a>
            </Dropdown>
            </div>
          </div>
        </div>
      </div>
    );
  }
};

export default StudentHeader;
